<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      .wrap {
          display: grid;
          width: 100%;
          grid-template-columns: 300px auto 300px;
      }

      .left,
      .right,
      .middle {
          height: 100px;
      }

      .left {
          background: coral;
      }

      .right {
          background: lightblue;
      }

      .middle {
          background: #555;
      }
  </style>
</head>
<body>
  <div class="wrap">
      <div class="left">左侧</div>
      <div class="middle">中间</div>
      <div class="right">右侧</div>
  </div>
</body>
</html>


<!-- 
  两栏布局：
    <div class="box">
      <div class="left">左边</div>
      <div class="right">右边</div>
    </div>
    一、
      1、使用 float 左浮左边栏
      2、右边模块使用 margin-left 撑出内容块做内容展示
      3、为父级元素添加BFC，防止下方元素飞到上方内容
      <style>
        .box{
          /* 添加BFC */
            overflow: hidden; 
        }
        .left {
            float: left;
            width: 200px;
            background-color: gray;
            height: 400px;
        }
        .right {
            margin-left: 210px;
            background-color: lightgray;
            height: 200px;
        }
      </style>
    二、使用flex
      .box{
          display: flex;
      }
      .left {
          width: 100px;
      }
      .right {
          flex: 1;
      }
  三栏布局：
      一、两边使用 float，中间使用 margin
      二、两边使用 absolute，中间使用 margin
      三、两边使用 float 和负 margin
      四、display: table 实现
      五、flex实现
      六、grid网格布局
        .wrap {
            display: grid;
            width: 100%;
            grid-template-columns: 300px auto 300px;
        }

        .left,
        .right,
        .middle {
            height: 100px;
        }

        .left {
            background: coral;
        }

        .right {
            background: lightblue;
        }

        .middle {
            background: #555;
        }



 -->
